<template>
	<div class="add">
		<div class="div1">
			<aside>
				<i class="el-icon-s-data"><span>&nbsp;商品-{{act}}</span></i>
				<router-link to="/admin/goos">返回列表</router-link>
				<el-button @click="add()" type="text" style="font-size: 16px;"><i class="el-icon-folder-checked">&nbsp;保存...</i></el-button>
				<p>2层商品类型下拉框&nbsp;el-cascader</p>
			</aside>
			<hr>
		</div>
		<div class="div2">
			<aside>
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
				:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
				action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</aside>
			<el-form ref="books" :model="books" label-width="250px">
				<el-form-item label="商品名称">
					<el-input v-model="books.name" style="width: 25vw;"></el-input>
				</el-form-item>
				<el-form-item label="商品序号">
					<el-input v-model="books.sn"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="books.price"></el-input>
				</el-form-item>
				<el-form-item label="商品厂商">
					<el-input v-model="books.maker"></el-input>
				</el-form-item>
				<el-form-item label="书籍作者">
					<el-input v-model="books.author"></el-input>
				</el-form-item>
				<el-form-item label="出厂时间">
					<el-date-picker v-model="books.tmake" type="date" placeholder="选择日期"></el-date-picker>
				</el-form-item>
				<el-form-item label="商品库存">
					<el-input v-model="books.stock"></el-input>
				</el-form-item>
				<el-form-item label="商品类型">
					<el-cascader
						v-model="goos"
					    :options="options"
						:props="custom">
					</el-cascader>
				</el-form-item>
				<el-form-item label="商品详情">
					<el-input type="textarea" placeholder="请输入信息" v-model="books.info"></el-input>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	name:'AddGoos',
	data(){
		return{
			act:'添加',
			options:[],
			imageUrl:"",
			fileList:[],
			goos:[],
			books:{
				type:{},
				},
			types:[],
			custom:{
				children:"list"
			}
		}
	},
	methods:{
		handleChange: function(file, fileList) {
		                 this.fileList = fileList;
		            },
		beforeAvatarUpload(file) {
		                const isJPG = file.type === 'image/jpeg';
		                const isLt2M = file.size / 1024 / 512;
		
		                if (!isJPG) {
		                    this.$message.error('上传图片只能是 JPG 格式!');
		                }
		                if (!isLt2M) {
		                    this.$message.error('上传图片大小不能超过 0.5MB!');
		                }
		                return isJPG && isLt2M;
		},
		add(){
			let fd = new FormData();
			let k =this.fileList;
			if(this.$route.query.id>0){
				fd.append("id",this.books.id);
			}
			fd.append("name", this.books.name);
			fd.append("sn", this.books.sn);
			fd.append("price", this.books.price);
			console.log(this.books.price);
			fd.append("maker", this.books.maker);
			fd.append("author", this.books.author);
			fd.append("tmake", new Date().getTime(this.books.tmake));
			fd.append("stock", this.books.stock);
			console.log(this.books.stock);
			let i =this.goos.length-1;
			let typeid=0;
			if(i !=0){
				typeid =this.goos[i];
			}
			fd.append("type.id",typeid);
			fd.append("info", this.books.info);
			if(k.length>0 && k[0].raw !=null){
				fd.append("mypic",k[0].raw);
			}
			console.log(fd);
			this.$postf("/api/adm/book/add",fd).then((resp)=>{
				this.books =resp.data.data;
				console.log(this.books);
				
				this.imageUrl =`${ip}/api/public/showimg/${resp.data.data.pic}`;
				
				this.$message({
					message:resp.data.msg,
					type:'success'
				})
			})
		}
	},
	mounted(){
		//查找类型
		this.$get("/api/adm/type/findAll2").then((resp)=>{
			this.types =resp.data.data;
			console.log(this.types);
			
			this.types.forEach((item)=>{
			if(item.pid==0){
				this.options.push({
					value:item.id,
					label:item.name})
				}
			})
			this.options.forEach((i)=>{
				let types2 =[];
				this.types.forEach((item)=>{
					if(item.pid==i.value && item.pid>0){
						types2.push({
							value:item.id,
							label:item.name
							})
						}
				})
				i.list=types2;
			})
			console.log(this.options);
		})
		// 根据 id 查找单个对象
		if(this.$route.query.id>0){
			this.act=this.$route.query.act;
			this.$get("/api/public/book/findById/"+this.$route.query.id).then((resp)=>{
			this.books =resp.data.data;
			console.log(this.books);
			this.imageUrl =`http://127.0.0.1:80/api/public/showimg/${resp.data.data.pic}`;
			})
		}
	}
}
</script>

<style scoped>
.add{
	width: 78%;
	margin: 0 auto;
}
.add .div1 aside{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.add .div1 aside a{
	color: #5fb8ff;
}
.avatar-uploader .el-upload {
    border: 1px dashed #c3c3c3;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 30px;
    color: #8c939d;
    width: 450px;
    height: 200px;
    line-height: 200px;
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
.add .div2{
	margin-top: 30px;
	display: flex;
}
.add .div2 aside{
	width: 30%;
	height: 240px;
	border: 1px dashed #c3c3c3;
}
.add .div2 aside img{
	width: 100%;
	height: 100%;
}
</style>
